<template>
    <div class="mobile-box">
        <el-menu default-active="2" router class="mobile" mode="horizontal" unique-opened :ellipsis="false">
            <el-menu-item index="/residentInfo">
                <div class="item">
                    <span class="iconfont icon-jibenxinxi font-img"></span>
                    <span class="context">基本信息</span>
                </div>
            </el-menu-item>
            <el-menu-item index="/healthRecord">
                <div class="item">
                    <span class="iconfont icon-jiankangdangan font-img"></span>
                    <span class="context">健康档案</span>
                </div>
            </el-menu-item>
            <el-menu-item index="/appointment">
                <div class="item">
                    <span class="iconfont icon-yuyueguahao font-img"></span>
                    <span class="context">预约挂号</span>
                </div>
            </el-menu-item>
            <el-menu-item index="/medication">
                <div class="item">
                    <span class="iconfont icon-shipinyaopinjianguan font-img"></span>
                    <span class="context">药品选购</span>
                </div>
            </el-menu-item>
            <el-menu-item index="/appointmentRecords">
                <div class="item">
                    <span class="iconfont icon-yuyuejilu1 font-img"></span>
                    <span class="context">预约记录</span>
                </div>
            </el-menu-item>
            <el-menu-item index="/orderRecords">
                <div class="item">
                    <span class="iconfont icon-gouyaojilu font-img"></span>
                    <span class="context">购药记录</span>
                </div>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.el-menu {
    height: 60px;
    width: 100vw;
    opacity: 0.93;
    display: flex;
    align-items: center;
    justify-content: start;
}

.el-menu .el-menu-item {
    width: 120px;
    white-space: nowrap;
}

.mobile-box {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8vh;
    overflow-x: auto;
    white-space: nowrap;
    background-color: #ccc;
    /* 隐藏滚动条 */
    /* Firefox */
    scrollbar-width: none;
    /* IE 和 Edge */
    -ms-overflow-style: none;
}

.mobile-box::-webkit-scrollbar {
    /* Chrome, Safari 和 Opera */
    display: none;
}

.mobile {
    width: auto;
    background-color: #fff;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    /* 确保没有内边距影响宽度 */
    padding: 0;
    /* 确保没有外边距影响宽度 */
    margin: 0;
}

.el-menu-item {
    width: auto;
    padding: 0 20px;
}

/* 当在移动端显示时 */
@media (max-width: 768px) {
    .pc {
        display: none;
    }

    .mobile-box {
        display: block;
        height: 8vh;
    }

    .el-menu {
        height: 100%;
        width: 150vw;
        opacity: 0.93;
    }

    .el-menu .el-menu-item {
        width: 25vw;
        height: 100%;
    }

    .el-menu .el-menu-item .item {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: max(8vh, 40px);
    }

    .menu-header {
        display: none;
    }

    .font-img {
        font-size: 20px;
        height: 4vh;
        line-height: 4vh;
        max-height: 20px;
    }

    .context {
        height: 4vh;
        line-height: 4vh;
        /* 确保文字对齐 */
        overflow: hidden;
        /* 防止文字超出 */
        text-overflow: ellipsis;
        /* 截断过长的文字 */
        white-space: nowrap;
        max-height: 20px;
        /* 防止文字渲染高度超出 */
    }
}
</style>